<template>
  <div id="app">
    <!-- <div class="nav-menu">
      <div>
        <img src="../src/assets/logo/hangkeNew.png" alt="" class="logo">
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo menu" mode="horizontal" text-color="#3655A5FF"
        active-text-color="#3655A5FF" router @select="select">
        <el-menu-item :index="item.id" :route="item.route" v-for="(item, index) in menu" :key="index">
          <template slot="title">
            {{ item.title }}
          </template>
        </el-menu-item>
      </el-menu>
    </div> -->
    <Navbar @select="select" :active="activeIndex"></Navbar>
    <router-view class="view" />
    <div class="footer">
      <div>
        <span v-for="(item, index) in menu" :key="index" @click="go(item)"
          :style="{ color: activeIndex == index + 1 ? '#fff' : '' }">{{ item.title }}
          <span v-show="index != menu.length - 1">&nbsp;&nbsp; / &nbsp;&nbsp;</span>
        </span>
      </div>
      <div>联系我们： Hangke_024@163.com</div>
      <div style="color:#ffffff66">版权所有 © 沈阳航科智能系统有限公司 － <a href="https://beian.miit.gov.cn/">辽ICP备2022005914号</a> </div>
    </div>
  </div>
</template>

<script>
import Navbar from '../src/components/Navbar.vue'
export default {
  components: { Navbar },
  name: "App",
  data() {
    return {
      activeIndex: "1",
      menu: [
        { id: "1", title: '首页', route: '/' },
        { id: "2", title: '企业简介', route: '/overview', },
        { id: "3", title: '产品与服务', route: '/product', },
        { id: "4", title: '应用案例', route: '/success-case' },
        { id: "5", title: '行业资讯', route: '/industryInformation' },
        { id: "6", title: '关于我们', route: '/journalism' },
      ],
      menus: [
        { id: "1", route: '/' },
        { id: "2", route: '/overview', },
        { id: "2", route: '/projectProcess', },
        { id: "3", route: '/product' },
        { id: "3", route: '/projectCase' },
        { id: "4", route: '/success-case' },
        { id: "5", route: '/industryInformation' },
        { id: "5", route: '/TechnicalQA' },
        { id: "6", route: '/journalism' },
      ]
    };
  },
  mounted() {
    let path = window.location.hash
    this.activeIndex = this.menus.filter(item => {
      return item.route == path.substring(1, path.length)
    })[0].id;
  },
  methods: {
    go(item) {
      this.$router.push(item.route);
      this.activeIndex = item.id;
      window.scrollTo({ left: 0, top: 0, behavior: 'smooth' })
    },
    select(key) {
      this.activeIndex = key;
      window.scrollTo({ left: 0, top: 0, behavior: 'smooth' })
    }
  }
};
</script>

<style>
#app {
  font-family: bb5728;
  color: #04113B;
  font-size: 16px;
}

body {
  margin: 0;
}

/* .nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: sticky;
  top: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  z-index: 100;
  box-shadow: 0px 4px 20px rgba(54, 85, 165, 0.1);
  margin-bottom: 4px;
}

.logo {
  height: 50px;
}

.el-menu.el-menu--horizontal {
  border: none !important;
  font-weight: 500 !important;
}

.el-menu--horizontal>.el-menu-item {
  height: 50px !important;
  line-height: 50px !important;
  font-size: 16px !important;
  margin: 0 20px !important;
  padding: 0 !important;
} */

.footer {
  background-color: #3655A5;
  text-align: center;
  height: 100px;
  color: #ffffff88;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer div {
  line-height: 28px;
  font-size: 14px;
}

.footer span {
  cursor: pointer;
}

a {
  color: #ffffff66;
}

.el-tabs--border-card {
  box-shadow: 0px 6px 30px rgba(54, 85, 165, 0.08) !important;
  border-radius: 0px 0px 16px 16px !important;
  border: none !important;
}

.el-tabs__content {
  min-height: 350px !important;
  padding: 20px !important;
}

.el-tabs__item.is-active {
  background-color: #3655A5FF !important;
  color: #fff !important;
}

.el-tabs__item {
  background-color: #fff !important;
  color: #3655A5FF !important;
  padding: 0 15px !important;
  font-size: 12px !important;
}

.el-tabs__nav-scroll {
  border-bottom: solid 1px #ECEDF3 !important;
}

.el-tabs__nav-next,
.el-tabs__nav-prev {
  width: 20px;
  text-align: center;
}

.el-carousel__arrow {
  width: 60px !important;
  height: 60px !important;
  background-color: #fff !important;
  color: #3655A5FF !important;
  font-size: 24px !important;
  box-shadow: 8px 8px 20px rgba(54, 85, 165, 0.08) !important;
}

.el-carousel__arrow:hover {
  background-color: #3655A5FF !important;
  color: #fff !important;
  opacity: 0.4 !important;
}

.el-carousel__arrow:active {
  background-color: #3655A5FF !important;
  color: #fff !important;
  opacity: 1 !important;
}

.el-icon-arrow-right,
.el-icon-arrow-left {
  font-weight: bold !important;
}

.el-carousel__button {
  width: 8px !important;
  height: 8px !important;
  background-color: #EEF2FFFF !important;
  border-radius: 50% !important;
}

.el-carousel__indicator.is-active button {
  background-color: #3655A5FF !important;
}

.el-carousel__container .el-carousel__item--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.el-carousel__container .is-active {
  padding: 20px !important;
  /* transform: translateX(223.75px) scale(1.3) !important; */
}
</style>


